<template>
   <el-header>
       <span class="title">金&nbsp;刚&nbsp;石&nbsp;文&nbsp;档</span>

        <div class="person_wrap">
        <div class="search_wrap">
          <el-input placeholder="请输入内容" v-model="input">
            <el-button slot="append"  @click="goToSearchResult"><i class="el-icon-search"></i></el-button>
          </el-input>
        </div>
        <div class="label">
          <el-dropdown>

              <!--这里这个value的值也要监控  -->
              
            <el-badge :value="teamMessageList.length+commentMessageList.length" class="item">
              <el-button circle type="info"  @click="goTo_Notice"><i class="el-icon-bell"></i></el-button>
            </el-badge>
            <el-dropdown-menu slot="dropdown">
              <router-link to="/notice">
              <!-- 下面的value要怎么设置 teamMessageList.length  commentMessageList.length privateMessageList.length-->
                <el-dropdown-item >团队消息&nbsp;&nbsp;&nbsp;<el-badge class="mark" :value="teamMessageList.length " /></el-dropdown-item>
                <el-dropdown-item >评论消息&nbsp;&nbsp;&nbsp;<el-badge class="mark" :value="commentMessageList.length"  /></el-dropdown-item>
                <el-dropdown-item >私信消息&nbsp;&nbsp;&nbsp;<el-badge class="mark" :value="1" /></el-dropdown-item>
              </router-link>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="user_head">
              <router-link to="/person"><el-avatar :src="this.userInfo.portrait"></el-avatar></router-link>
              
           </div>
        </div>
        </div>
    </el-header>
   
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  name:'Header',
    
  data(){
    return{
      input:"",
      value:"",
      user_info:"3",
      head:"https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
    }
  },

  async mounted () {
      await this.recordPrivateMessageList(this.userInfo.userid)
      await this.recordCommentMessageList(this.userInfo.userid)
      await this.recordTeamMessageList(this.userInfo.userid)
  },

  computed:{
    ...mapState(['userList','articleList','userInfo']),
    ...mapState(['teamMessageList','commentMessageList','privateMessageList'])
  },
  methods:{
    ...mapActions(['recordSearchUser','recordKeyword','recordSearchDoc','recordTeamList',
        'recordTeamMessageList','recordCommentMessageList','recordPrivateMessageList']),
    goToSearchResult(){
          this.$router.replace('/home/searchresult')
          //存储关键词
           this.recordKeyword(this.input)
        //全局搜索用户
       //     this.recordSearchUser(this.input)
            //全局搜索文档
            this.recordSearchDoc(this.input)
         //全局搜索团队
         //  this.recordTeamList(this.input)
      
      },
      goTo_Notice(){
        this.$router.replace('/notice')
      }
  }
}

</script>
<style>

.title {
  display: block;

  color: #f5fcf7;
  font-size: 30px;
  float: left;



  color: #f5fcf7;
  font-size: 30px;
  float: left;
    margin-top: 15px;
}


/*下面是搜索框的css */
.person_wrap{
 margin-top: 10px;
  height: 60px;
  width: 350px;
  position: absolute;
  right: 5%;
  
  }
.search_wrap{
  width: 250px;
  height: 20px;

  margin-right: 90px;
}

.el-dropdown{
     margin: auto;
     position: absolute;
     width: 41px;
     right:35px;
     top: 2px;
}

.el-dropdown-item{
    text-decoration: none;
}
.mark{
    margin-top :-5px ;
}
a{
    text-decoration: none;
}
.user_head{
    position: absolute;
    right: -30px;
    top: 2px;

}
</style>